<template>
  <div class="app-container">
    <!-- <div class="filterDiv tx-r">
      <el-button icon="el-icon-add" size="mini" type="primary" @click="handleAdd">新增</el-button>
    </div>-->
    <div class="contentDiv">
      <el-table v-loading="loading" :data="typeList">
        <el-empty slot="empty" :image-size="120" />
        <el-table-column label="序号" prop="serialNumber" width="50" align="center" />
        <!-- <el-table-column label="编号" align="center" prop="auxiliaryTypeCode" width="130" /> -->
        <el-table-column label="核算类型" align="center" prop="auxiliaryTypeName" />
        <el-table-column label="代码长度" align="center" prop="codeLength" />
        <el-table-column label="自动编码" align="center">
          <template slot-scope="{row}">
            <span>{{ row.isAutoCode === 1 ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="初始编码" align="center" prop="start" />
        <el-table-column label="步长" align="center" prop="step" />
        <el-table-column label="前缀自动补0" align="center" prop="isAutoZeroFill">
          <template slot-scope="{row}">
            <span>{{ row.isAutoZeroFill === 1 ? '补0' : '不补0' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否系统" align="center">
          <template slot-scope="{row}">
            <span>{{ row.isSystem === 1 ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="顺序" align="center" prop="seq" /> -->
        <el-table-column label="备注" align="center" prop="remarks" />
        <el-table-column label="是否启用" align="center" width="120">
          <template slot-scope="{row}">
            <span v-if="row.isSystem === 1">是</span>
            <el-switch v-else v-model="row.isDisable" :active-value="0" :inactive-value="1" @change="updateStatus($event, row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="{row}">
            <el-button v-permiss="['702010']" size="mini" type="text" @click="handleUpdate(row)">修改</el-button>
            <el-button v-permiss="['702030']" size="mini" type="text" @click="handleDetail(row.auxiliaryTypeCode)">核算项</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" inline label-width="120px">
        <el-form-item label="核算类型名称" prop="auxiliaryTypeName">
          <el-input v-model="form.auxiliaryTypeName" :disabled="form.isSystem === 1" size="small" placeholder="请输入核算类型名称" />
        </el-form-item>
        <el-form-item label="代码长度" prop="codeLength">
          <el-input-number v-model="form.codeLength" :min="1" :max="30" size="small" placeholder="请输入代码长度" />
        </el-form-item>
        <el-form-item label="初始编码" prop="start">
          <el-input v-model="form.start" size="small" placeholder="请输入初始编码" />
        </el-form-item>
        <el-form-item label="步长" prop="step">
          <el-input-number v-model="form.step" :min="1" :max="10" size="small" placeholder="请输入步长" />
        </el-form-item>
        <el-form-item label="自动编码" prop="isAutoCode">
          <el-radio v-model="form.isAutoCode" :label="1">是</el-radio>
          <el-radio v-model="form.isAutoCode" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="前缀自动补0" prop="isAutoZeroFill" style="margin-left:80px">
          <el-radio v-model="form.isAutoZeroFill" :label="1">补0</el-radio>
          <el-radio v-model="form.isAutoZeroFill" :label="0">不补0</el-radio>
        </el-form-item>
        <el-form-item label="编码规则" prop="expression">
          <el-tooltip class="item" effect="dark" content="无前缀后缀{code}、前缀A{code}，后缀{code}B，前缀后缀A{code}B" placement="bottom">
            <i class="el-icon-question" />
          </el-tooltip>
          <el-input v-model="form.expression" style="width:165px" size="small" placeholder="请输入编码规则" />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="form.remarks" size="small" type="text" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="是否启用" prop="isDisable">
          <el-radio v-model="form.isDisable" :label="0">是</el-radio>
          <el-radio v-model="form.isDisable" :label="1">否</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listType,
  delType,
  saveType,
  updateIsDisableById
} from '@/api/auxiliary'
export default {
  name: 'Type',
  components: {},
  data() {
    return {
      loading: true,
      total: 0,
      typeList: [],
      title: '',
      open: false,
      listQuery: {},
      form: {
        auxiliaryTypeName: '',
        isAutoZeroFill: 1,
        isAutoCode: 0,
        step: 1,
        start: 1,
        expression: '',
        isDisable: 0,
        codeLength: null,
        id: ''
      },
      rules: {
        auxiliaryTypeName: [
          { message: '请输入核算类型名称', trigger: 'blur', required: true }
        ],
        codeLength: [
          { message: '请输入代码长度', trigger: 'blur', required: true }
        ],
        step: [
          { message: '请输入步长', trigger: 'blur', required: true }
        ],
        start: [
          { message: '请输入初始编码', trigger: 'blur', required: true }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    updateStatus(e, row) {
      this.changeAvaiable(e, row.id)
    },
    changeAvaiable(isDisable, id) {
      var obj = { isDisable, id }
      updateIsDisableById(obj).then((res) => {
        if (res.data.errorCode === '0') {
          this.$message.success(isDisable === 1 ? '已禁用' : '已启用')
        }
      })
    },
    getList() {
      listType(this.listQuery).then((res) => {
        this.typeList = res.data.data || []
        this.loading = false
      })
    },
    cancel() {
      this.open = false
      this.reset()
    },
    reset() {
      this.form = {
        auxiliaryTypeName: '',
        isAutoZeroFill: 1,
        isAutoCode: 0,
        step: 1,
        start: 1,
        expression: '',
        isDisable: 0,
        codeLength: null
      }
    },
    handleQuery() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加辅助核算类型'
    },
    handleUpdate(row) {
      this.reset()
      this.form = row
      this.form.isAutoZeroFill = row.isAutoZeroFill === 1 ? 1 : 0
      this.open = true
      this.title = '修改辅助核算类型'
    },
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          saveType(this.form).then((res) => {
            if (res.data.errorCode === '0') {
              this.$message.success('修改成功')
              this.open = false
              this.getList()
            }
          })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delType({ id: row.id }).then(() => {
          this.getList()
          this.$message.success('删除成功')
        })
      })
    },
    handleDetail(type) {
      this.$router.push('/init/auxiliarydetail?type=' + type)
    }
  }
}
</script>
